iT邦幫忙

2023 iThome 鐵人賽

DAY 25
1
SideProject30

用 React 和 Firebase 打造一個完整 side project 吧!系列 第 25

Day25:實作 Firebase Authentication 電話驗證

  • 分享至 

  • xImage
  •  

在使用者成功註冊、並且角色為店家時,需先經過電話驗證才可進行刊登服務項目供顧客預約,此故事情境在這篇文章可以回顧,所以今天將重點放在電話驗證的實作上。

使用 JavaScript 做電話號碼初步格式驗證

這部份得承認因為沒有經驗,所以規則只是很初步的寫一下,沒有真的串接到臺灣各電信業者的部分。

  1. 在電話號碼輸入欄位,新增 onChange 的監聽事件
<FormInput 
    text="聯絡電話" 
    type="number" 
    id="phone" 
    labelText="聯絡電話(不可變更)" 
    onChange={onChange} 
    required  
/>
  1. 在 React 頁面中,定義需要的 state 值
    showErrorPhone 預設為 fasle,只有當驗證規則通過時才會轉為 true,可達到在頁面裡即時更新是否不符格式的呈現需求。errorPhoneMessage 則依照當下輸入值去即時更新提示訊息。
const [showErrorPhone, setShowErrorPhone] = useState(false);
const [errorPhoneMessage, setErrorPhoneMessage] = useState("請以全數字填寫,勿加入任何特殊符號。");

所以在頁面中,緊接在電話欄位輸入框後面就會是這樣的寫法:

<FormInput 
    text="聯絡電話" 
    type="number" 
    id="phone" 
    labelText="聯絡電話(不可變更)" 
    onChange={onChange} 
    required  
/>
{showErrorPhone === true &&
  <div>{errorPhoneMessage}</div>
}
{showOTPInput === true &&
  <div>
      {* 這邊放要發送驗證碼區塊的相關內容(依個人需求有異) *}
  </div>
}
  1. 定義要檢查的規則
    (1) 檢查手機號碼的長度是否為 10 碼
if (phoneNumber.length < 10) {
    setShowErrorPhone(true);
    setErrorPhoneMessage("目前輸入格式不符")
    return false;
}

(2) 檢查手機號碼的第一個數字是否為 0

if (phoneNumber[0] !== "0") {
    setShowErrorPhone(true);
    setErrorPhoneMessage("首字必須為0")
    return false;
}

(3) 使用正規表達式,檢查手機號碼是否符合全數字不帶任何符號的格式

const regex = /^\d{3}\d{3}\d{4}$/;
if (!regex.test(phoneNumber)) {
    setShowErrorPhone(true);
    setErrorPhoneMessage("請輸入數字")
    return false;
}
  1. 完整檢查格式的程式碼
    如果上述 3 點的檢查規則皆符合,則會回傳 true
function isValidPhoneNumber(phoneNumber) {
  if (phoneNumber.length < 10) {// 檢查手機號碼的長度是否為 10
    setShowErrorPhone(true);
    setErrorPhoneMessage("目前輸入格式不符")
    return false;
  }
  if (phoneNumber[0] !== "0") {// 檢查手機號碼的第一個數字是否為 0
    setShowErrorPhone(true);
    setErrorPhoneMessage("首字必須為0")
    return false;
  }
  const regex = /^\d{3}\d{3}\d{4}$/;
  if (!regex.test(phoneNumber)) {// 檢查手機號碼是否符合全數字的格式
    setShowErrorPhone(true);
    setErrorPhoneMessage("請輸入數字")
    return false;
  }

  return true;
};
  1. 在適當處呼叫檢查電話號碼的 function
    因為我目前將整頁表單的 onChange 寫在一起,所以是選擇監聽當使用者正在改變電話號碼欄位的輸入值時,就去觸發檢查電話號碼的 function(isValidPhoneNumber)。
const onChange = (e) => {
    if(e.target.id === "phone") {
      const phoneNumber = e.target.value;
      if(isValidPhoneNumber(phoneNumber) === true){
        setShowOTPInput(true);
      }else {
        setShowErrorPhone(false);
      }
    }
}

開啟 Firebase Authentication 電話驗證服務功能

  1. 開通身分驗證之登入供應商功能
    於 Firebase Console 控制台的 Sign-in-method 分頁中,點選「新增供應商」,並於彈出視窗中開啟電信業者的服務即可。另外也可以選填下方的測試用電話號碼欄位,預設要測試的電話號碼與對應驗證碼。

(1) 一開始會看到提示是一串不是很熟悉的號碼格式,重點只要記得電話號碼要有「+」做為開頭,換句話說,在開發時必須留意傳給 Firebase 的號碼必須為像是「+886」等國籍代碼。
https://ithelp.ithome.com.tw/upload/images/20231010/20140920F1IQOKAzOM.png

(2) 驗證碼為6位數!
(3) 不要使用真實手機號碼做為測試號碼
(4) 後續要更改測試號碼要透過刪除再新增的方式
按照同一方式點選近來即可看到,如下圖紅圈處,滿直覺的介面~
https://ithelp.ithome.com.tw/upload/images/20231010/20140920yUD1PB0p3c.png

  1. 調整簡訊設定
    於 Firebase Console 控制台的 Settings 分頁中,選擇「允許」開啟發送簡訊的設定。
    https://ithelp.ithome.com.tw/upload/images/20231010/20140920V9OwGpe3id.png

小結

雖然今天卡關很久,但還是盡量把握假日之可開發時間,今天在畫面實作則是完成 404, 店家視角的服務項目列表頁(尚無資料時)與新增/編輯服務項目頁。明天繼續努力開發!


上一篇
Day24:實作會員資料更新
下一篇
Day26:實作 Firebase Authentication 電話驗證(二)
系列文
用 React 和 Firebase 打造一個完整 side project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言